• 你可能還在疑惑昨天的香蕉生產線跟RxJS到底有什麼關係!!??
• 別急，先跟著李小龍的建議~ Empty Your Mind
  

先把開發環境弄舒服些

• stackblitz是一個線上的coding系統，方便、快速，就是你學習RxJS的好幫手。
• 點選進去後，選取RxJS的項目，就可以快速地開啟RxJS的環境來練習囉，是不是很佛心啊!!
• 

咱們的目標，是要快速地先上手RxJS，安裝相關的知識，等到我們學會之後，自然能心平氣和地安裝。網路上很多搞定本地端安裝的資料，別擔心。

第一步:建立一個可被觀察(Observable)的目標

• 用香蕉生產線為例子，香蕉是我們的來源(source)，也就是我們要觀察的目標(Observable)
• 建立一個Oberservable物件，用一個變數命名為Obs$來承接它，加上$錢字號能幫助我們快速辨識Observable物件。
• Observable物件的參數，是一個function，function的attribute，則是一個subscriber。

✍subscriber的細節，我們先賣個關子，待會你就會了解它的來龍去脈囉。

import { Observable } from 'rxjs';

// 第一步:建立一個 ~ 被觀察的目標(Observable)
const obs$ = new Observable((subscriber) => {
  subscriber.next('1'); // 第1批香蕉
  subscriber.next('2'); // 第2批香蕉
  subscriber.next('3'); // 第3批香蕉
  subscriber.next('4'); // 第4批香蕉
  subscriber.next('5'); // 第5批香蕉
  subscriber.complete(); // 結束!
});

開始將資料透過next傳遞出去

• 我們模擬一批一批香蕉往外派送給輸送帶，透過subscriber.next(data)不斷地將資料一筆一筆的送出，再第五筆送出後，下達complete的指令。

觀察看看結果

• 開始訂閱就代表開始要啟動程序囉!
• Observable物件提供subscribe()，裡面我們放了一個(data)=>console.log(data)，承接資料，印出。
• 到目前為止，我們模擬了一批一批香蕉往外送的概念，引出的資料也符合我們預期。

obs$.subscribe((data)=>console.log(data)); //陸續印出: 1 2 3 4 5

第二步，建立觀察者(Observer)

• 觀察者(Observer)就是產線中堅守岡位的負責人，具備了三種技能:

1. next: 往下傳遞資料
2. error: 發生錯誤，中止運作，進行除錯(Debug)
3. complete: 結束任務，中止運作

• 以物件(Object)形式建立這三個技能，並設定對應的function功能。

complete()沒有attribute，完成就代表結束，不會再拿到任何資料囉!

• 程式碼如下:

// 第二步:建立一個觀察者(Observer)
const observer = {
  next: (data) => console.log(`checked ${data}, next!`),
  error: (err) => console.log(`error is occured: ${err}}`),
  complete: () => console.log(`complete`),
};

將Observer加入訂閱

...
obs$.subscribe(observer);
// checked 1, next!
// checked 2, next!
// checked 3, next!
// checked 4, next!
// checked 5, next!

• 我們將觀察者(Observer)放入訂閱的清單中，對被觀察者(Obervable)來說，是不是代表這位觀察者就是我的訂閱者(Subscriber)呢!!
• 唉呦~這也難怪，我在上頭會使用subscriber.next(傳遞的資料)，是不是茅塞頓開了啊!

用底下這張圖，來說明關係

修蛋幾咧，你還沒解釋Error耶!

• error代表著生產出現問題，需要立即停止，跟complete一樣，我們修改一下程式來觀察一下結果。

• case1: 使用complete來結束

// 第一步:建立一個 ~ 被觀察的目標(Observable)
const obs$ = new Observable((subscriber) => {
  subscriber.next('1'); // 第1批香蕉
  subscriber.next('2'); // 第2批香蕉
  subscriber.next('3'); // 第3批香蕉
  subscriber.next('4'); // 第4批香蕉
  subscriber.next('5'); // 第5批香蕉
  subscriber.complete(); // <-------------complete 結束!
  subscriber.next('6'); // 第6批香蕉
  subscriber.next('7'); // 第7批香蕉
  subscriber.next('8'); // 第7批香蕉
});

// 第二步:建立一個觀察者(Observer)
const observer = {
  next: (data) => console.log(`checked ${data}, next!`),
  error: (err) => console.log(`error is occured: ${err}}`),
  complete: () => console.log(`complete`),
};

obs$.subscribe(observer); // 加入觀察者Observer訂閱

• complete呼叫後，代表生產也結束，6,7,8自然不會印出來囉!

• case2: 在complete之前呼叫error

// 第一步:建立一個 ~ 被觀察的目標(Observable)
const obs$ = new Observable((subscriber) => {
  subscriber.next('1'); // 第1批香蕉
  subscriber.next('2'); // 第2批香蕉
  subscriber.next('3'); // 第3批香蕉
  subscriber.error('Oops~~~'); // <------------- error is occured: Oops~~~
  subscriber.next('4'); // 第4批香蕉
  subscriber.next('5'); // 第5批香蕉
  subscriber.complete(); // <------------- complete 結束!
  subscriber.next('6'); // 第6批香蕉
  subscriber.next('7'); // 第7批香蕉
  subscriber.next('8'); // 第7批香蕉
});

...

• error()呼叫之後，馬上停止生產，用意就是要讓使用者去進一步檢查，概念就是這樣，是不是很Easy啊。

✍Recap

• 今日Day2範例
• 對被觀察者(Observable)來說，觀察者(Observer)加入訂閱(subscribe)，自然成了訂閱者(Subscriber)囉!
• 建立習慣將Observable的變數尾巴，加上$錢字號，對未來在review code時會有很大的幫助喔!

今天的你，打好了基礎，加深了觀念，繼續往day3邁進